<template>
	<view class="xh-view">
		<u-input :border="false" :placeholder="item.placeholder" v-model="dataValue" :disabled="disabled" type="select" @click="showTableFun" @clear="clearInput" clearable></u-input>
		<!-- <u-tag :text="item" class="select-item" type="primary" @click="selectValue(index)" :mode="activeIndex !== index ? 'plain' : 'dark'" v-for="(item, index) in item.data.setting" :key="index"></u-tag>
		<view v-for="(item, $index) in otherNum" :key="'other' + $index" style="width: calc(33% - 10rpx)"></view> -->
		<u-select v-model="select.status" :list="select.list" @confirm="selectChange"></u-select>
	</view>
</template>

<script>
export default {
	props: {
		/** 值 */
		value: {
			type: [String, Number],
			default: '',
		},
		/** 索引值 用于更新数据 */
		index: Number,
		/** 包含数据源 */
		item: Object,
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			dataValue: '',
			activeIndex: null,
			// 下啦选择相关字段
			select: {
				status: false,
				list: [],
			},
		};
	},
	computed: {
		otherNum() {
			// 用于填充
			let num = 0;
			if (this.item.data.setting.length % 3) {
				num = 3 - (this.item.data.setting.length % 3);
			}
			return num;
		},
	},

	watch: {
		// value: function (val) {
		// 	this.dataValue = val;
		// },
	},

	created() {
		// this.activeIndex = this.item.data.setting.findIndex((data) => data == this.value);
	},
	mounted() {
		this.item.data.setting.forEach((v, k) => {
			this.select.list.push({
				label: v,
				value: k,
			});
		});
	},
	methods: {
		// selectValue(index) {
		// 	this.activeIndex = index;
		// 	let data = {
		// 		index: this.index,
		// 		fieldName: this.item.data.fieldName,
		// 		value: this.item.data.setting[index],
		// 	};
		// 	this.$emit('value-change', data);
		// },
		selectChange(row) {
			this.dataValue = row[0].label;

			let data = {
				index: this.index,
				fieldName: this.item.data.fieldName,
				value: this.item.data.setting[row[0].value],
			};
			this.$emit('value-change', data);
		},
		showTableFun() {
			this.select.status = true;
		},
	},
};
</script>

<style>
.xh-view {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.select-item {
	width: calc((100%-30rpx) / 3);
	margin: 5rpx;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
